<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script src="./lib/echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '第一季度销量',
        show: true,
        textStyle: {
          color: 'skyblue',
          fontSize: '24',
        },
        subtext:'数量'
      },
      tooltip: {},
      legend: {
        data: ['销量','价格'],
       // show : false
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '黑丝'],
        axisLine: {
          lineStyle : {
            width: 2,
            color : 'hotpink',
            type : 'solid',
          }
        },
        splitLine: {
          lineStyle : {
            color : 'yellow'
          }
        }
      },
      yAxis: {
        // axisLine: {
        //   // show : true,
        //   lineStyle : {
        //     width: 2,
        //     color : 'hotpink',
        //     type : 'solid',
        //   }
      },
      series: [
        {
          name: '销量',
          type: 'line',//图标的类型 line 折线图 pie 饼图 bar 柱状图
          data: [5, 20, 36, 8, 12, 26],
          lineStyle :{
            width: 3,
          },
          areaStyle: {
            color: 'lime'
          },
          symbolSize: 10
        },
        {
          name:'价格',
          type: 'bar',
          data: [15, 25, 30, 8, 14, 24],
        }
      ],
      grid: {
        left : '10%',
        top : '60',
        backgroundColor: 'skyblue',
        show : true,
      },
      color: ['#fff','black']
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>
</html>